<template>
    <div class="cont">
        <div class="b">
            <a :href="'/developer/index/' + developerId" target="_blank">{{developerInfo.company_name}}</a>
        </div>
        <div class="mt-16 df">
            <span class="df-s0">卖家账号：</span>
            <span>{{developerInfo.username}}</span>
        </div>
        <div class="mt-12 df">
            <span class="df-s0">资质荣誉：</span>
            <div class="df df-ww">
                <a target="_blank" title="开发者实名认证" class="wi icbox" href="/store-static-promise.html"><img src="~@/assets/img/icon/icon-zizhi.png" /></a>
                <a target="_blank" v-if="developerInfo.is_company" title="开发者企业认证" class="wi icbox" href="/store-static-promise.html"><img src="~@/assets/img/icon/icon-certification-enterprise.png" /></a>
                <a target="_blank" v-if="developerInfo.is_flexible" title="开发者个体认证" class="wi icbox" href="/store-static-promise.html"><img src="~@/assets/img/icon/icon-certification-enterprise-1.png" /></a>
                <template v-if="developerInfo.icons">
                    <a target="_blank" v-for="(item,index) in developerInfo.icons" :key="index" :title="item.title" class="wi icbox" href="javascript:void(0)"><img :src="item.logo" /></a>
                </template>
            </div>
        </div>
        <div class="mt-12 df">
            <span class="df-s0">入驻年限：</span>
            <div v-if="developerInfo.join_year > 0" class="yearbox df ai-c">
                <div class="y df ai-c jc-c">5</div>
                <div class="d">微擎 5 年店</div>
            </div>
            <div v-else>不足一年</div>
        </div>
        <div class="mt-12 df">
            <span class="df-s0">卖家等级：</span>
            <span>{{developerInfo.rolename}}</span>
        </div>
        <div class="mt-12 df">
            <span>经营凭证：</span>
            <div class="df df-ww">
                <a target="_blank" title="店铺营业执照" class="wi" :href="'/verify/company/' + developerInfo.dev_code"><img src="~@/assets/img/icon/icon-company-logo-real.png" /></a>
            </div>
        </div>

        <div class="line mt-20"></div>

        <div v-if="stat" class="mt-14">
            <el-tooltip placement="left" v-for="(item, key) in stat" effect="light" :key="key" popper-class="reputation">
                <template #content>
                    <div class="df theme" :class="item.class+'-theme'">
                        <div class="txt df ai-c">微擎开发者平均值：{{item.all}}</div>
                        <div class="after c-ff df ai-c jc-c">{{key!=='active'?item.differ:''}}</div>
                    </div>
                </template>
                <a :href="'/developer/reputation/' + developerId" target="_blank" class="stat df ai-c jc-b">
                    <span>{{item.title}}</span>
                    <span class="c-blue dtl" :class="item.class">{{item.developer}}</span>
                </a>
            </el-tooltip>
            <div class="line mt-14"></div>
        </div>

        <div class="df jc-c mt-20">
            <button class="contact c-ff cursor" @click="bdv=true">
                <el-icon color="#ffffff" :size="16" class="icon"><PhoneFilled /></el-icon>
                <span>联系我们</span>
            </button>
        </div>
    </div>
    <div class="cont mt-20">
        
    </div>
    <el-dialog v-model="bdv" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
        <template #header>
            <div class="txt-c fs-18">商务合作</div>
        </template>
        <el-form :model="bdform" label-width="80px" label-position="left" :rules="bdrules" ref="bd">
            <el-form-item label="咨询意向" prop="content">
                <el-radio-group v-model="bdform.content" class="radiobox">
                    <el-radio v-for="(item, index) in businessExample" :key="index" :label="item.name" border></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="昵称" prop="name">
                <el-input placeholder="请输入昵称" v-model="bdform.name" size="large" style="width:200px; margin-right:32px;"></el-input>
                <el-radio-group v-model="bdform.sex">
                    <el-radio :label="1">先生</el-radio>
                    <el-radio :label="2">女士</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="联系方式" prop="mobile">
                <div class="tipbox">
                    <el-input
                        v-model="bdform.showMobile"
                        size="large"
                        @focus="bdphoneFocus = true;"
                        @blur="mobileBlur"
                        @input="bdform.mobile = bdform.showMobile; bdphoneFocus = false;"
                        @change="bdform.mobile = bdform.showMobile;"
                    ></el-input>
                    <div
                        v-if="bdphoneFocus && shangji.mobile"
                        class="tip"
                        @click="bdform.mobile=shangji.mobile;bdform.showMobile=shangji.mobile.replace(/^(\d{3})\d{4}/,'$1***');bdphoneFocus=false"
                    >选择您已注册的手机号：{{shangji.mobile}}</div>
                </div>
            </el-form-item>
            <el-form-item v-if="bdform.mobile != shangji.mobile" label="验证码" prop="sms_code">
                <el-input placeholder="6位验证码" v-model="bdform.sms_code" size="large">
                    <template #append >
                        <div class="cursor">
                            <span v-if="timeNum>0">{{timeNum}}s重新获取</span>
                            <span v-else @click="sendCode" style="cursor: pointer; color: #1890ff">发送短信验证码</span>
                        </div>
                    </template>
                    <!-- <template #append v-if="smsCodeDisabled === true"></template>
                    <template #append v-else></template> -->
                </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
                <el-checkbox v-model="bdform.check1">勾选并同意</el-checkbox>
                <a href="https://wiki.w7.com/chapter/1249?id=3396" target="_blank" style="color: #1890ff; cursor: pointer">《隐私协议》</a>
            </el-form-item>
            <el-form-item class="agreement">
                <el-checkbox v-model="bdform.check2">同意将联系方式推送给相关商家进行售前服务</el-checkbox>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer txt-c">
                <el-button @click="bdv = false">取消</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import myAxios from '@/utils';
const origin = "https://im.w7.cc";

export default {
    props: {
        data: {default: null}
    },
    data(){
        return {
            stat: null,
            developerInfo: {
"status": {
    "is_down": false,
    "is_will_down": false,
    "will_down_text": "",
    "change_log": "",
    "issue_url": ""
},
"reputation": {
    "stat": {
        "active": {
            "title": "最近活跃度",
            "developer": "一般活跃",
            "all": "一般活跃",
            "differ": "-17"
        },
        "satisfy": {
            "title": "信誉指数",
            "developer": "5.00分",
            "all": "5.00分",
            "differ": "0.00"
        },
        "app": {
            "title": "应用评分",
            "developer": "5.00分",
            "all": "4.89分",
            "differ": "0.11",
            "history": {
                "developer": "5.00分",
                "all": "4.99分",
                "differ": "0.01"
            }
        }
    }
},
"profile": {
    "index_banner_url": "",
    "mobile_banner_url": ""
},
"username": "新极点",
"avatar": "https:\/\/avatar.w7.cc\/images\/avatar\/0\/324\/838.jpg?v=1670907726&imageView2\/5\/w\/100\/h\/100\/format\/png",
"join_year": 3,
"dev_code": "M7e59NYZe2",
"rolename": "中级开发者",
"is_company": true,
"is_flexible": false,
"has_business_licence": true,
"company_name": "武汉极点创新软件技术有限公司",
"has_deposit": true,
"icons": []
            },
            shangji: {
                channel: "tAzfftG3n8ve/ELpI127rijzZHNK05UuKPNkc0rTlS4=",
                mobile: "17634113584",
                shop_uid: "Pug+Dc/pW7Xxbd3gvpPAifFt3eC+k8CJ8W3d4L6TwIk=",
                source: "tYyI37hTZdFew+KlwEhMf/ODVT+B9nv4AP/M3cC1i7w=",
                user_uid: "V18ZTOFIyW/xbd3gvpPAifFt3eC+k8CJ8W3d4L6TwIk=",
            },

            bdv: false, // 显示商务合作
            timeNum: 0, // 短信验证
            bdform: {
                content: '',
                name: '',
                sex: 1,
                mobile: '',
                showMobile: '',
                sms_code: '',
                check1: false,
                check2: false,
            },
            bdrules: {
                content:[{ required: true, message: "请选择咨询内容", trigger: "blur" }],
                mobile: [
                    {required: true, message: "请输入手机号", trigger:["blur","input","change"]},
                    {validator: (rule, value, callback)=>{
                        if(value!=this.shangji.mobile && !/^1\d{10}$/.test(value)){
                            callback(new Error("请输入正确的手机号"))
                        }else{
                            callback();
                        }
                    }, trigger: "blur"},
                ],
                sms_code: [{required:true,message:'请输入验证码',trigger:'blur'},{ min:6,max: 6,message:'请输入正确的验证码', trigger:'blur'}],
                name: [
                    {required: true, message: "请输入姓名", trigger: ["blur","input"]},
                    {pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/, message: "姓名格式不正确", trigger: "blur"},
                ],
            },
            bdphoneFocus: false,
            businessExample: [], // 咨询意向
        }
    },

    created(){
        if(this.developerInfo?.reputation?.stat){this.getStat()}
        if(this.data){
            this.getData();
        }
        this.getBusiness();
    },
    watch: {
        "developerInfo.reputation"(){this.getStat()},
        data(){
            this.getData();
        },
    },
    computed:{
        mobileStar(){ return this.shangji.mobile.replace(/^(\d{3})\d{4}/,"$1***");}
    },
    methods: {
        getData(){
            return;
            myAxios.get("/developer/info/"+this.data.seller_uid).then(res=>{
                if(!res?.data){return}
                console.log(res.data);
            })
        },
        getBusiness(){
            myAxios({
                url: origin + "/frontend/business/example",
                method: "get"
            }).then((res) => {
                if(!res?.data){return}
                this.businessExample = res.data.data;
            });
        },
        getStat(){
            if(!this.developerInfo?.reputation?.stat){return}
            var Reputation = JSON.parse(JSON.stringify(this.developerInfo.reputation.stat));
            for (let i in Reputation) {
                if (Reputation[i]['differ'] > 0) {
                    Reputation[i]['class']  = 'up';
                } else if(Reputation[i]['differ'] < 0) {
                    Reputation[i]['class'] = 'down';
                } else {
                    Reputation[i].class = "equal";
                }
                Reputation[i].differ = Math.abs(Reputation[i]['differ']).toFixed(2) + '分';
                if(Reputation[i]['children']) {
                    var children = Reputation[i]['children']
                    for(let j in children) {
                        if (children[j]['differ'] > 0) {
                            children[j]['class']  = 'up'
                        } else if(children[j]['differ'] < 0) {
                            children[j]['class'] = 'down'
                        } else {
                            children[j].class = "equal"
                        }
                        children[j].differ = Math.abs(children[j]['differ']).toFixed(2) + '分'
                    }
                }
                this.stat = Reputation;
            }
        },
        mobileBlur(){setTimeout(()=>{ this.bdphoneFocus = false;},300);},
        sendCode(){
            myAxios({
                url: origin + "/frontend/business/chance/sendSms",
                data: {mobile: this.bdform.mobile},
                method: "post"
            }).then((res) => {
                if(res.status !== 200){return}
                this.$message.success("发送成功");
                this.timeNum = 60;
                let interval = setInterval(()=>{
                    this.timeNum--;
                    if(this.timeNum<=0){
                        clearInterval(interval);
                    }
                },1000);
            });
        },
        submit(){
            this.$refs.bd.validate((valid) => {
                if (!valid) {return}
                if (!this.bdform.check1 || !this.bdform.check2) {this.$message.error("请勾选并同意相关协议！"); return;}

                myAxios({
                    url: origin + "/frontend/business/chance",
                    data: {
                        ...this.bdform,
                        url: location.href,
                        source: (this.shangji && this.shangji.source) || document.title,
                        shop_uid: this.shangji && this.shangji.shop_uid,
                        user_uid: this.shangji && this.shangji.user_uid,
                    },
                    method: "post",
                }).then(res=>{
                    if(!res?.data){return}
                    this.$message.success("提交成功");
                    this.bdv = false;
                });
            });
        },
    },
}
</script>

<style scoped>
.cont{padding:20px 22px; background:#ffffff;}
.cont .icbox{padding:0 2px;}
.cont .icbox img{display:block; width:20px; height:20px;}
.cont .yearbox{line-height:20px; font-size:10px; border:1px solid #e8e9eb;}
.cont .yearbox .y{background:#428bca; color:#ffffff; width:20px;}
.cont .yearbox .d{padding:0 5px; color:#428bca;}
.cont .line{border-top:1px dashed #e8e9eb;}
.cont .updown{height:px; width:auto; display:block;}

.cont .stat{padding:6px 0;}
.cont .stat .dtl{padding-right:10px; position: relative;}
.cont .stat .down::after{content: url('~@/assets/img/icon/down.png'); position: absolute; right:0; top: -1px;}
.cont .stat .equal::after{content: ''; position: absolute; right:0; top: 50%; width: 7px; height: 2px; background-color: #ffd064; margin-top: -1px;}
.cont .stat .up::after{content: url('~@/assets/img/icon/up.png'); position: absolute; right:0; top: -1px;}

.reputation .theme{height:36px;}
.reputation .theme .txt{padding:0 10px;}
.reputation .theme .after{box-sizing:border-box; min-width:36px; padding:0 10px;}
.reputation .up-theme .after{background-color: #F56C6C;}
.reputation .up-theme .after::before {content:'高';}
.reputation .down-theme .after{background:#428bca;}
.reputation .down-theme .after::before{content:'低'}
.reputation .equal-theme .after{background:#E6A23C;}
.reputation .equal-theme .after::before{content:'持平'}

.contact{background:#428bca; border:none; outline:none; box-sizing:border-box; width:176px; height:32px; line-height:1;}
.contact .icon{vertical-align:text-bottom; margin-right:4px;}

.tipbox{position:relative; width:100%;}
.tipbox .tip{
    position: absolute;
    font-size: 12px;
    top: 43px;
    background-color: #fff;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
    border: 1px solid #dcdfe6;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 9999;
    padding: 0 8px;
    border-radius: 4px;
    cursor: pointer;
}
.tipbox .tip:hover{background-color:#f5f7fa;}
</style>